<template>
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    class="dialogStyleMiddle"
    :visible.sync="dialogVisible"
  >
    <el-row>
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <el-col :span="rummagerList.length >= 3 ? 24 : 12">
          <el-form-item label="巡检人员" prop="rummager">
            <div class="rummager">
              <el-tag
                v-for="(tag,index) in rummagerList"
                :key="index"
                closable
                class="tag-item"
                :disable-transitions="false"
                size="small"
                @close="handleClose(tag)"
              >{{ tag }}</el-tag>
              <el-input
                v-if="inputVisible"
                ref="saveTagInput"
                v-model="tagValue"
                class="tagInput"
                size="mini"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              />
              <div v-if="!inputVisible" size="mini" class="add-btn" @click="showInput">添加</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="workerList.length >= 3 ? 24 : 12">
          <el-form-item label="现场人员" prop="worker">
            <div class="rummager">
              <el-tag
                v-for="(tag,index) in workerList"
                :key="index"
                closable
                class="tag-item"
                :disable-transitions="false"
                size="small"
                @close="WorkerClose(tag)"
              >{{ tag }}</el-tag>
              <el-input
                v-if="workerVisible"
                ref="saveTagInput2"
                v-model="workerTagValue"
                class="tagInput"
                size="mini"
                @keyup.enter.native="addWorkerConfrim"
                @blur="addWorkerConfrim"
              />
              <div v-if="!workerVisible" size="mini" class="add-btn" @click="showWorkerInput">添加</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="equipmentList.length >= 3 ? 24 : 12">
          <el-form-item label="现场设备" prop="equipment">
            <div class="rummager">
              <el-tag
                v-for="(tag,index) in equipmentList"
                :key="index"
                closable
                class="tag-item"
                :disable-transitions="false"
                size="small"
                @close="EquimentClose(tag)"
              >{{ tag }}</el-tag>
              <el-input
                v-if="equipmentVisible"
                ref="saveTagInput3"
                v-model="equipmentTagValue"
                class="tagInput"
                size="mini"
                @keyup.enter.native="addEquimentConfrim"
                @blur="addEquimentConfrim"
              />
              <div v-if="!equipmentVisible" size="mini" class="add-btn" @click="showEquimentInput">添加</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区" prop="areaList">
            <el-cascader
              v-model="formData.areaList"
              size="medium"
              placeholder="请选择所在地区"
              :options="cityOptions"
              clearable
              style="width: 100%"
              @change="handleRegion"
            >
              <template slot-scope="{ data }">
                <span>{{ data.label }}</span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详情地址" prop="location">
            <el-input v-model="formData.location" placeholder="请输入详情地址" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label prop="verdict">
            <label slot="label" v-html="`结&emsp;&emsp;论`" />
            <el-select
              v-model="formData.verdict"
              clearable
              style="width:100%"
              size="medium"
              placeholder="请选择结论"
            >
              <el-option
                v-for="item in verdictOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="course">
            <label slot="label" v-html="`过&emsp;&emsp;程`" />
            <el-input v-model="formData.course" :rows="3" :maxlength="500" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="影像资料" prop="appFiles">
            <img-uplode
              ref="fileUplode"
              :edit-file-list="inspectionList"
              @getFileIdsList="getInspectionLPic"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" :disabled="btnDisabled" type="primary" @click="submitForm">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addRecord,
  updateRecord,
  getRecordById
} from '@/api/projectInspection/inspectionRecord'
// 页面组件- 附件上传
import ImgUplode from '@/components/Upload/ImgUplode'

export default {
  name: 'AddDialog',
  components: {
    ImgUplode
  },
  props: {
    // 城市数据
    cityOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const checkRummager = (rules, value, callback) => {
      if (this.rummagerList.length > 0) {
        callback()
      } else {
        callback(new Error('巡检人员不能为空'))
      }
    }
    return {
      filters: {},
      inspectionList: [],
      // 结论数组
      verdictOptions: [
        { value: '0', label: '优秀' },
        { value: '1', label: '良好' },
        { value: '2', label: '较差' }
      ],
      /* 表单 start */
      btnDisabled: false,
      dialogVisible: false, // 弹框显隐
      dialogTitle: '', // 弹框标题
      inputVisible: false,
      tagValue: '',
      rummagerList: [], // 巡检人员列表
      workerList: [], // 现场人员列表
      workerVisible: false, // 现在人员的input显隐
      workerTagValue: '', // 现场人员的值
      equipmentList: [], // 设备列表
      equipmentVisible: false, // 设备的显隐
      equipmentTagValue: '', // 设备的值
      formData: {
        id: '',
        equipment: '', // 现场设备
        areaList: [], // 地址
        verdict: '', // 结论
        course: '', // 过程
        rummager: '', // 巡检人员
        worker: '', // 现场人员
        nation: '', // 国家
        region: '', // 地区
        province: '', // 省
        city: '', // 市
        county: '', // 县
        location: '', // 详细地址
        appFiles: '' // 附件照片
      },
      // from表单审核
      rules: {
        rummager: [
          { required: true, trigger: 'blur', validate: checkRummager }
        ],
        worker: [
          { required: true, message: '现场人员不能为空', trigger: 'blur' }
        ],
        equipment: [
          { required: true, message: '现场设备不能为空', trigger: 'blur' }
        ],
        areaList: [
          { required: true, message: '所在地区不能为空', trigger: 'blur' }
        ],
        verdict: [{ required: true, message: '结论不能为空', trigger: 'blur' }],
        course: [{ required: true, message: '过程不能为空', trigger: 'blur' }],
        location: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ],
        appFiles: [
          { required: true, message: '附件不能为空', trigger: 'blur' }
        ]
      }
      /* 表单 end */
    }
  },
  methods: {
    handleRegion(regionList) {
      const [nation, region, province, city, county] = regionList
      this.formData = { ...this.formData, nation, region, province, city, county }
    },
    EquimentClose(tag) {
      this.equipmentList.splice(this.equipmentList.indexOf(tag), 1)
    },
    addEquimentConfrim() {
      if (this.equipmentTagValue) {
        this.equipmentList.push(this.equipmentTagValue)
      }
      this.equipmentVisible = false
      this.equipmentTagValue = ''
    },
    showEquimentInput() {
      this.equipmentVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput3.$refs.input.focus()
      })
    },
    WorkerClose(tag) {
      this.workerList.splice(this.workerList.indexOf(tag), 1)
    },
    addWorkerConfrim() {
      if (this.workerTagValue) {
        this.workerList.push(this.workerTagValue)
      }
      this.workerVisible = false
      this.workerTagValue = ''
    },
    showWorkerInput() {
      this.workerVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput2.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      if (this.tagValue) {
        this.rummagerList.push(this.tagValue)
      }
      this.inputVisible = false
      this.tagValue = ''
    },
    handleClose(tag) {
      this.rummagerList.splice(this.rummagerList.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleAdd(title, id, filters) {
      const { startTime, proId, endTime } = filters
      this.dialogTitle = title
      this.dialogVisible = true
      this.filters = { startTime, proId, endTime }
      this.emptyForm()
      if (id) {
        this.getDetailById(id)
      }
    },
    async getDetailById(id) {
      const { data } = await getRecordById(id)
      this.formData = { ...this.formData, ...data }
      const { rummager, worker, equipment, nation, region, province, city, county, appFiles } = data
      this.formData.areaList = [nation, region, province, city, county]
      this.rummagerList = rummager.split(',')
      this.workerList = worker.split(',')
      this.equipmentList = equipment.split(',')
      if (appFiles && appFiles.length > 0) {
        this.inspectionList = appFiles
      }
    },
    // 弹框取消按钮
    cancel() {
      this.dialogVisible = false
      this.emptyForm()
      this.btnDisabled = false
    },
    // 保存
    submitForm() {
      // 巡查人员切换为字符串
      this.formData.rummager = this.rummagerList.join(',')
      this.formData.worker = this.workerList.join(',')
      this.formData.equipment = this.equipmentList.join(',')
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          if (this.formData.id) {
            // 修改
            // this.formData.appFiles = [...this.appFiles, ...this.formData.appFiles]
            await updateRecord(this.formData, ...this.filters)
            this.msgSuccess('修改成功')
          } else {
            // 新增
            await addRecord(this.formData, ...this.filters)
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 清空弹出
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
      this.formData.appFiles = ''
      this.formData.areaList = [] // 城市数据
      this.inspectionList = [] // 清空照片
      this.rummagerList = [] // 清空多选
      this.workerList = []
      this.equipmentList = []
    },
    getInspectionLPic(fileIdsList, deleteFileIds, newFileList) {
      this.formData.appFiles = newFileList
    }
  }
}
</script>

<style lang='scss' scoped>
.rummager {
  min-width: 302px;
  padding: 0 15px;
  height: 36px;
  border: 1px solid #dcdfe6;
  color: #606266;
  line-height: 34px;
  border-radius: 4px;
  position: relative;
}
.tagInput {
  width: 80px;
}
.tag-item {
  margin-right: 5px;
}
.add-btn {
  vertical-align: middle;
  width: 66px;
  font-size: 12px;
  border-left: 1px solid #dcdfe6;
  display: inline-block;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  position: absolute;
  right: 0;
}
</style>
